<!--
 * @页面名称:移动端预览页面
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="preview">
    <Header :title="fileNmme" @clickLeft="clickLeft" />
    <div class="content">
      <!-- 电子文件预览模块(主要指pdf等文件) -->
      <iframe v-if="showFileType === 'pdf'" :src="src" width="100%" height="100%" frameborder="0"></iframe>
      <!-- 视频模块 -->
      <vue3VideoPlay v-else-if="showFileType === 'video'" v-bind="options" :poster="options.poster" />
      <!-- 音频 -->
      <!-- <APlayer v-else-if="showFileType === 'audio'" :music="audio[0]" :list="audio" :showlrc="true"></APlayer> -->
      <div v-else-if="showFileType === 'audio'" id="aplayer" ref="playerRef"></div>
      <!-- 图片 -->
      <var-image v-else-if="showFileType === 'img'" fit="contain" width="100%" height="100%" :src="imgSrc" @click="previewImg" />
      <!-- xml和json格式文件预览 -->
      <div class="xmlCode" v-if="showFileType === 'xml'">
        <codemirror v-model:value="xmlCode" :tabSize="2" :options="editorOption"> </codemirror>
      </div>
      <!-- txt预览页面 -->
      <iframe
        style="background: #fff"
        v-if="showFileType === 'txt'"
        :src="txtSrc"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import { videoType, audioType, imgType, xmlType, jsonType, txtType } from "./ts/contentType";
import { ImagePreview } from "@varlet/ui";
import "@varlet/ui/es/image-preview/style";
import axios from "axios";
import APlayer from "APlayer";
import "APlayer/dist/APlayer.min.css";
import vkbeautify from "vkbeautify";
// json和xml预览插件
import Codemirror from "codemirror-editor-vue3";
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";
import { useRoute, useRouter } from "vue-router";
import ACrypto from "@/utils/crypto";
import Header from "../header/index.vue";

const route = useRoute();
const router = useRouter();
// 预览全文类型
const showFileType = ref("pdf");
//pdf预览地址
const src = ref("");
//图片预览地址
const imgSrc = ref("");
//txt文件地址
const txtSrc = ref("");
// xml文件地址
const xmlCode = ref("");
// 播放器实例
const playerRef = ref(null);
const state: any = reactive({
  instance: null
});
// 代码编辑框配置
const editorOption = reactive({
  // 代码编辑框配置
  autorefresh: true,
  tabSize: 4,
  mode: "text/javascript",
  // theme: "ayu-mirage",
  line: true,
  viewportMargin: Infinity, //处理高度自适应时搭配使用
  highlightDifferences: true,
  autofocus: false,
  indentUnit: 2,
  smartIndent: true,
  readOnly: true, // 只读
  showCursorWhenSelecting: true,
  firstLineNumber: 1
});
// 视频来源
const sources = ref([
  {
    src: "",
    type: "video/mp4"
  }
]);
// 视频配置
const options = reactive({
  width: "100%", //播放器宽度
  height: "100%", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "", //视频源
  poster: "", //封面
  muted: true, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: ["audioTrack", "quality", "speedRate", "volume", "setting", "pip", "pageFullScreen", "fullScreen"] //显示所有按钮,
});
// 音频配置
const audio = ref([
  {
    name: "", //歌名
    artist: "", //歌手
    url: "", //音频文件地址
    cover: "", //音乐封面地址
    lrc: "[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词"
  }
]);
// 文件名
const fileNmme = ref("");

// 获取全文
const getInfo = () => {
  const { type, file, keyword, page, download, print, name }: any = route.query;
  const preFile = import.meta.env.VITE_STATIC + ACrypto.getSS(file);
  fileNmme.value = ACrypto.getSS(name);
  if (["application/pdf"].includes(type)) {
    // 展示pdf类型
    showFileType.value = "pdf";
    src.value = `/pdfjs/web/viewer.html?file=${encodeURIComponent(preFile)}&print=${print}&download=${download}&keyword=${
      keyword || ""
    }#page=${page || 1}`;
  } else if (imgType.includes(type)) {
    // 图片
    showFileType.value = "img";
    imgSrc.value = preFile;
  } else if (videoType.includes(type)) {
    // 视频文件预览
    showFileType.value = "video";
    options.src = preFile;
  } else if (audioType.includes(type)) {
    showFileType.value = "audio";
    audio.value[0].name = ACrypto.getSS(name);
    audio.value[0].url = preFile;
    // 音频文件预览
    nextTick(() => {
      state.instance = new APlayer({
        container: playerRef.value,
        audio: audio.value
      });
    });
  } else if (xmlType.includes(type)) {
    // xml和json文件直接预览展示
    showFileType.value = "xml";
    axios.get(preFile).then(res => {
      if (jsonType.includes(type)) {
        xmlCode.value = vkbeautify.json(res.data);
      } else {
        xmlCode.value = vkbeautify.xml(res.data);
      }
    });
  } else if (txtType.includes(type)) {
    // txt文件预览展示
    showFileType.value = "txt";
    axios({
      url: preFile,
      method: "get",
      responseType: "blob"
    }).then(res => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(res.data);
      fileReader.onload = (e: any) => {
        txtSrc.value = e.target.result;
      };
    });
  }
};
// 点击左侧返回按钮
const clickLeft = () => {
  router.back();
};
// 点击图片
const previewImg = () => {
  ImagePreview({
    images: [imgSrc.value],
    closeable: true
  });
};
onMounted(() => {
  getInfo();
});
// 销毁
onBeforeUnmount(() => {
  state.instance?.destroy();
});
</script>

<style lang="scss">
.xmlCode {
  .CodeMirror {
    height: auto !important;
  }
}
</style>
<style lang="scss" scoped>
.preview {
  height: 100%;
  width: 100%;
  .content {
    width: 100%;
    height: calc(100% - 54px);
    display: flex;
    flex-direction: column;
  }
  .aplayer {
    margin-top: 50%;
  }
}
</style>
